<template>
  <div id="app">
      <h2>记事本</h2>
      <InputArea @AddTask="AddTask"></InputArea>
      <ListArea @removeTask="removeTask" :List="this.list"></ListArea>
      <FootArea @clear="clear" :List="this.list"></FootArea>
  </div>
</template>

<script>
import FootArea from './components/Foot.vue'
import ListArea from './components/List.vue'
import InputArea from './components/InputArea.vue'

export default {
  name: 'App',
  components: {
    InputArea,
    ListArea,
    FootArea
  },
  data() {
    return {
      list:JSON.parse(localStorage.getItem('list'))||[
        {id:1,names:"学习VUE"},
        {id:2,names:"学习JavaScript"},
        {id:3,names:"学习鸿蒙"}
        ]  
    }
  },
  methods: {
    AddTask(taskName){
      this.list.unshift({
        id:+new Date(),
        names:taskName
      })
    },
    removeTask(id){
      this.list=this.list.filter((item)=>item.id!=id)
    },
    clear(){
      this.list=[]
    }
  },
  watch:{
    list:{
      deep:true,
      handler(newValue){
        localStorage.setItem('list',JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style>
body{
  margin: 0;
}
#app {
  margin: auto;
  height: 500px;
  width: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
